<!--
 * @Description: file content
 * @Author: Wenmin He
 * @Date: 2021-07-02 13:40:04
 * @LastEditors: Wenmin He
 * @LastEditTime: 2021-07-02 18:37:54
-->
<template>
	<view class="content">
		<view class="topsearch">
			<view class="frame">
				<input v-model="searchCon" bindinput="shoppinginput" placeholder="请输入你的关键字"/>
			</view>
			<view class="filter-btn" > 
				<view class="filter-btn-item" @tap="change(0)" :class="{'filter-btn-active':btnnum == 0}">入住登记</view>
				<view class="filter-btn-item" @tap="change(1)" :class="{'filter-btn-active':btnnum == 1}">医学观察</view>
				<view class="filter-btn-item" @tap="change(2)" :class="{'filter-btn-active':btnnum == 2}">健康排查</view>
				<view class="filter-btn-item" @tap="change(3)" :class="{'filter-btn-active':btnnum == 3}">离点登记</view>
			</view>
 		</view>
		<view class="record-outer">
			 <view class="record" v-for="(item,index) in recordList">
				 <view class="record-img">
						<image class="record-img-src" :src="item.src" mode="widthFix"></image>
					 </view>
				 <view class="record-left"> 
					<view class="record-name" >{{item.name}}</view>
					<view class="record-idcard">{{item.idcard}}</view>
					<view class="record-time">{{item.time}}</view>
				</view>
				
				<view class=“record-right”>
					<image class="record-right-img" src="https://szgd-dev.tgovcloud.com/public/images/check-in-icon.png" mode="widthFix"></image>
				</view>
			</view>
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recordList:[
					{
						id:1,
						name:'王小明',
						src:'https://szgd-dev.tgovcloud.com/public/images/img-person.png',
						idcard:'452424199902021111',
						time:'2020-07-02 17:20:11',
						type:'1'
					},
					{
						id:2,
						name:'王小明',
						src:'https://szgd-dev.tgovcloud.com/public/images/img-person.png',
						idcard:'452424199902021111',
						time:'2020-07-02 17:20:11',
						type:'2'
					},
				],
				btnnum: 0,

			}
		},
		onLoad() {

		},
		methods: {
			change(e) {
				this.btnnum = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		box-sizing: border-box;
		width:100%;
		height:100vh;
		background-color: #f2f2f2;
	}
	.topsearch {
		background-color: #fff;
		align-items: center;
		padding:40rpx;
		padding-bottom: 0;
		box-sizing: border-box;
	}
	.frame {
		border:1px solid #f2f2f2;
		width: 100%;
		border-radius: 20rpx;
		padding:10rpx 20rpx;
		box-sizing: border-box;
	}
	.frame>input {
		font-size: 24rpx;
		margin: 6rpx 0;
	}
	.topsearch>text {
		width: 15%;
		margin-left: 5%;
		color: #a8a7a7fa;
	}
	.filter-btn{
		display: flex;
		flex-wrap:wrap;
  		justify-content:space-around;
		margin-top: 40rpx;
		&-item{
			flex: 1;
			padding-bottom: 20rpx;
			text-align: center;
		}
		&-active{
        border-bottom:3px solid #2C9AF1;
    }
	}

	.btna{
        border-bottom:3px solid #2C9AF1;
    }
	.record-outer{
		padding:40rpx;
		padding-top: 0;
		box-sizing: border-box;
	}
	.record{
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		padding:40rpx 20rpx;
		border-radius: 10rpx;
		box-shadow: 0px 0px 10px rgba(229, 229, 229, 1);
		margin-top: 40rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		&-img{
			width: 120rpx;
			height: 120rpx;
			border-radius: 120rpx;
			display: inline-block;
			vertical-align: middle;
			margin-right:40rpx;
			&-src{
				width:100%;
				border-radius: 100%;
			}
		}
		&-name{
			display: inline-block;
			vertical-align: middle;
			color:#000;
			font-size: 36rpx;
			font-weight: 600;
		}
		&-idcard{
			font-size: 28rpx;
		}
		&-time{
			font-size: 26rpx;
			color:#999;
		}
		&-right{
			flex: 1;
			text-align: right;
			&-img{
				width:120rpx;
			}
		}
	}
</style>>
